<template>
    <div>
        个人中心
        <br>
        <div class="menu">
            <ul>
                <li>
                    <router-link to="/user/order">my-Order</router-link>
                </li>
                <li>
                    <router-link to="/user/setting">my-Setting</router-link>
                </li>
            </ul>
            <ul>
                <li v-for="item in articles">
                    <router-link :to="'/user/page/'+item.id">
                        {{item.title}}
                    </router-link>
                </li>
            </ul>
            <ul>
                <li>
                    <router-link to="/user/article?x=1&y=1">word-1</router-link>
                </li>
                <li>
                    <router-link :to="{path:'/user/article',query:{x:'h',y:'i'}}">word-2</router-link>
                </li>
            </ul>
            <br>
            <button @click="$router.push({path:'/user/article',query:{x:'but',y:'ton'}})">word-3</button>
        </div>
        <div class="content">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "User",
        data() {
            return {
                articles: [
                    {id: 1, title: 'page-1'},
                    {id: 2, title: 'page-2'},
                    {id: 3, title: 'page-3'},
                ],
                path: 'user',
            }
        },
        created() {
            // document.title = "this is user";
            console.log('user is created');
        },
        unmounted() {
            console.log('user is unmounted');
        },
        activated() {
            console.log('user is activated');
            this.$router.push(this.path);
        },
        deactivated() {
            console.log('user is deactivated');
        },
        //用于缓存页面状态
        beforeRouteLeave(to, from) {
            this.path = from.fullPath;
        }
    }
</script>

<style scoped>
    .menu {
        width: 30%;
        height: 100px;
        background-color: #2c3e50;
        float: left;
    }

    .content {
        width: 70%;
        height: 100px;
        background-color: #cccccc;
        float: right;
    }

    a {
        font-weight: bold;
        color: green;
    }

    a.router-link-exact-active {
        color: red;
    }
</style>